<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

                <!-- bootstrap的javascript插件--需要引用jQuery -->
		<script src="bootstrap/js/jquery.min.js"></script>
		
		<!--包括所有已编译的插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div>
				<h3 class="text-center text-primary">Bootstrap 导航元素</h3>
				本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。
				Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。<br>
				<h3 class="text-primary">表格导航或标签</h3>
				创建一个标签式的导航菜单：以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。
				
				<p>标签式的导航菜单</p>
				<ul class="nav nav-tabs">
				   <li class="active"><a href="#">Home</a></li>
				   <li><a href="#">SVN</a></li>
				   <li><a href="#">iOS</a></li>
				   <li><a href="#">VB.Net</a></li>
				   <li><a href="#">Java</a></li>
				   <li><a href="#">PHP</a></li>
				</ul>
				
			</div>
			
			<div>
				<h3 class="text-primary">胶囊式的导航菜单--基本的胶囊式导航菜单</h3>
				如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可<br>
				
				<p>基本的胶囊式导航菜单</p>
				<ul class="nav nav-pills">
				   <li class="active"><a href="#">Home</a></li>
				   <li><a href="#">SVN</a></li>
				   <li><a href="#">iOS</a></li>
				   <li><a href="#">VB.Net</a></li>
				   <li><a href="#">Java</a></li>
				   <li><a href="#">PHP</a></li>
				</ul>
			</div>
			
			
			<div>
				<h3 class="text-primary">垂直的胶囊式导航菜单</h3>
				您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠
				
				    <p>垂直的胶囊式导航菜单</p>
					<ul class="nav nav-pills nav-stacked">
					   <li class="active"><a href="#">Home</a></li>
					   <li><a href="#">SVN</a></li>
					   <li><a href="#">iOS</a></li>
					   <li><a href="#">VB.Net</a></li>
					   <li><a href="#">Java</a></li>
					   <li><a href="#">PHP</a></li>
					</ul>
			</div>
			
			
			<div>
				<h3 class="text-primary">两端对齐的导航</h3>
				您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用
				 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。
				 
				 <p>两端对齐的导航元素</p>
				 <ul class="nav nav-pills nav-justified">
				    <li class="active"><a href="#">Home</a></li>
				    <li><a href="#">SVN</a></li>
				    <li><a href="#">iOS</a></li>
				    <li><a href="#">VB.Net</a></li>
				    <li><a href="#">Java</a></li>
				    <li><a href="#">PHP</a></li>
				 </ul>
				 <br><br><br>
				 
				 <ul class="nav nav-tabs nav-justified">
				    <li class="active"><a href="#">Home</a></li>
				    <li><a href="#">SVN</a></li>
				    <li><a href="#">iOS</a></li>
				    <li><a href="#">VB.Net</a></li>
				    <li><a href="#">Java</a></li>
				    <li><a href="#">PHP</a></li>
				</ul>
				
			</div>
			
			
			<div>
				<h3 class="text-primary">禁用链接</h3>
				对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，<br>
				
				<p>导航元素中的禁用链接</p>
				<ul class="nav nav-pills">
				   <li class="active"><a href="#">Home</a></li>
				   <li><a href="#">SVN</a></li>
				   <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
				   <li><a href="#">VB.Net</a></li>
				   <li><a href="#">Java</a></li>
				   <li><a href="#">PHP</a></li>
				</ul>
				<br><br>
				<ul class="nav nav-tabs">
				   <li class="active"><a href="#">Home</a></li>
				   <li><a href="#">SVN</a></li>
				   <li><a href="#">iOS</a></li>
				   <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
				   <li><a href="#">Java</a></li>
				   <li><a href="#">PHP</a></li>
				 </ul>
				 
			</div>
			
			
		</div>
		
	</body>
</html>
